﻿@model Otter.Models.ArticleEditModel
@{
  ViewBag.Title = Model.IsNewArticle ? "Create new article" : Model.Title;
}
<h1>@ViewBag.Title</h1>
@using (Html.BeginForm(Model.IsNewArticle ? "Create" : "Edit", "Article", FormMethod.Post, new { id = "edit-form", role = "form" }))
{
  <div class="form-group">
    @Html.LabelFor(m => m.Title):
    @Html.TextBoxFor(m => m.Title, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Title)
  </div>
  <div class="form-group">
    <label for="Text">Edit the article text using @Html.ActionLink("Markdown syntax", "Read", new { id = "markdown-syntax-help" }):</label>
    @Html.TextAreaFor(m => m.Text, new { @class = "form-control otter-monospace", rows = 10 })
    @Html.ValidationMessageFor(m => m.Text)
  </div>
  <label>Preview:</label>
  <div id="Preview">
  </div>
  @Html.EditorFor(m => m.Security)
  @Html.ValidationMessageFor(m => m.Security)
  <div class="form-group">
    @Html.LabelFor(m => m.Tags):
    @Html.TextBoxFor(m => m.Tags, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Tags)
  </div>
  if (!Model.IsNewArticle)
  {
  <div class="form-group">
    @Html.LabelFor(m => m.Comment):
    @Html.TextBoxFor(m => m.Comment, new { @class = "form-control" })
    @Html.ValidationMessageFor(m => m.Comment)
  </div>
  @Html.HiddenFor(m => m.ArticleId)
  @Html.HiddenFor(m => m.UpdatedBy)
  @Html.HiddenFor(m => m.UpdatedDtm)
  @Html.HiddenFor(m => m.Revision)
  @Html.HiddenFor(m => m.UrlTitle)
  }
  <button type="submit" value="" class="btn btn-primary">@(Model.IsNewArticle ? "Save" : "Save changes")</button>
  if (Model.IsNewArticle)
  {
    @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-default" })
  }
  else
  {
    @Html.ActionLink("Cancel", "Read", new { id = Model.UrlTitle }, new { @class = "btn btn-default" })
  }
}
@section head
{
  <style type="text/css">
    .loading {
      background-color: #aaa;
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
    }
    #Preview {
      border: 2px dashed #ccc;
      padding: 5px;
      height: 250px;
      overflow-y: scroll;
      margin-bottom: 1em;
    }
  </style>
}
@section scripts
  {
  <script type="text/javascript" src="@Url.Content("~/Scripts/content-format.js")"></script>
  <script type="text/javascript">

    var requestId = 0;

    var loadPreview = function () {
      $.ajax({
        url: '@Url.Action("Preview")',
        type: 'POST',
        data: { 'id': requestId, 'text': $("#Text").val() },
        success: function (data) {
          if (data.id == requestId) {
            $('#Preview').html(data.html);
            applyContentFormat($('#Preview'));
            $('#Preview').removeClass('loading');
          }
        },
        dataType: 'json'
      });
    }

    var setDirtyForm = function (dirty) {
      if (dirty) {
        window.onbeforeunload = function (e) {
          return "You have unsaved changes to the article. Are you sure you want to leave without saving?";
        }
      } else {
        window.onbeforeunload = null;
      }
    }

    var dirtyHandler = function () {
      setDirtyForm(true);
      $('#edit-form :input').unbind("change", dirtyHandler);
    }

    $(document).ready(function () {

      $('#edit-form').submit(function () {
        setDirtyForm(false);
        if ($('#Comment').length > 0 && $('#Comment').val().length == 0 && !confirm('Are you sure you wish to submit your changes without specifying a reason for the change?')) {
          return false;
        }
      });

      $("#Text").bind("input propertychange", function (evt) {

        if (window.event && event.type == "propertychange" && event.propertyName != "value") {
          return;
        }

        window.clearTimeout($(this).data("timeout"));
        $('#Preview').addClass('loading');
        requestId = new Date().getTime();

        $(this).data("timeout", setTimeout(loadPreview, 1000));
      });

      loadPreview();

      $('#edit-form :input').bind("change", dirtyHandler);

    });

  </script>
}
